{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui.min.css' %}">
    <script src="{% static 'plugins/layui/layui.min.js' %}"></script>
    <style>
        html,body{
            width:100%;
            height:100%;
        }
        div.login-main{
            width:410px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="login-main">
    <div class="layui-card">
        <div class="layui-card-header">用户登录</div>
        <div class="layui-card-body">
            <form class="layui-form"  method="post" novalidate autocomplete="off">
                {% csrf_token %}
                <div class="demo-login-container">
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-username"></i>
                            </div>
<!--                            {{form.username}}-->
<!--                            方法二，并绑定属性value-->
                            <input type="text" name="username" value="{{form.username.value | default:''}}" lay-verify="required" placeholder="用户名"
                                   lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                        </div>
                    {% if form.username.errors %}
                        <div class="layui-form-mid layui-word-aux layui-font-red">{{ form.username.errors.0 }}</div>
                    {% endif %}
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-password"></i>
                            </div>
<!--                            {{form.password}}-->
                            <!--  方法二，并绑定属性value-->
                            <input type="password" name="password" value="{{form.password.value | default:''}}" lay-verify="required" placeholder="密   码"
                                lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                        </div>
                    {% if form.password.errors %}
                        <div class="layui-form-mid layui-word-aux layui-font-red">{{ form.password.errors.0 }}</div>
                    {% endif %}
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <div class="layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-vercode"></i>
                                    </div>
<!--                            {{form.code}}-->
                                    <input type="text" name="code" value="{{form.code.value | default:''}}" lay-verify="required"
                                           placeholder="验证码"
                                           lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"
                                           lay-affix="clear">
                                </div>
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
<!--                                    <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">-->
                                    <img src="/image/code/"  onclick="this.src='/image/code/?t='+ new Date().getTime();"/>
                                </div>
                            </div>
                        </div>
                    {% if form.code.errors %}
                        <div class="layui-form-mid layui-word-aux layui-font-red">{{ form.code.errors.0 }}</div>
                    {% endif %}
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
</body>
</html>